<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>题目</title>
    <link rel="stylesheet" href="fonts/iconfont.css" />
    <link rel="stylesheet" href="css/font.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/mui.css" />
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/TouchSlide.1.1.js"></script>

    <script type="text/javascript">
        function xx(doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function() {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
                };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        }

        function back() {
            history.back(-1);
        }

        function init() {
            xx(document, window);
            $("#zdColse").click(function() {
                $("#jsBox").remove();
            });
            TouchSlide({
                slideCell: "#leftTabBox"
            });
        }
    </script>
</head>

<body>
    <header>
        <div class="titlebar reverse">
            <a href="catemain-errtm.html">
                <i class="iconfont">&#xe640;</i>
            </a>
            <h1>题目</h1>
            <a href="javascript:back()">
                <!-- <i class="iconfont">&#xe60e;</i> -->
            </a>

        </div>
    </header>
    <!-- <div id="jsBox">
        <div style="width:100%;text-align:center;">
            <img src="images/fx.png" width="100%"></img>
        </div>
        <div style="margin-top:10px;width:100%;text-align:center;">
            <img src="images/zd.png" id="zdColse"></img>
        </div>

    </div> -->
    <div id='app'>
        <div style="padding-bottom:44px;padding-top:44px;">
            <div class="bd">
                <div class="test" style="margin-top:10px;" v-for="(item,i) in dataList">
                    <div class="test_con">
                        <div class="item">
                            <div class="tit">
                                <span>{{i+1}}</span>
                                <input type="hidden" id="1" value="1"></input>【{{item.TYPENUM==='1'?'单选题':'多选题'}}】{{item.TOPICTITLE}}（ ）。
                            </div>
                            <div class="item_con">
                                <div class="answ">
                                    <input type='hidden' name='QuestionA1' class='answ' id='QuestionA1' value='' />
                                    <ul>
                                        <li class='options' v-for="(answerItem,i) in item.ANSWER" @click="setDaan(item,answerItem)">
                                            <div>{{answerItem.ANSWERMSG}}</div>
                                            <!-- <van-button type="primary" size="large" @click="getxx">{{answerItem.ANSWERMSG}}</van-button> -->
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <!--item_con结束-->
                            <div class="detail-box">
                                <div class="detail-title">选择答案</div>
                                <div class="detail-wrap" style="text-align:center;padding-top:20px;padding-bottom:20px;">
                                    <font style="font-size:40px;color:red;font-weight:bold;">
                                        <van-field v-model='item.daan' readonly />
                                    </font>
                                </div>
                                <div class="detail-wrap" style="border-top:1px solid #d7e5f6;height:80px;">
                                    <span class="left" style="margin-top:15px;clear:both;">总题数量：{{dataList.length}}道</span> &nbsp;&nbsp;&nbsp;
                                    <span class="left" style="margin-top:15px;clear:both;">已经答数：{{daanList.length}}道</span>
                                </div>
                            </div>
                        </div>
                        <!--item结束-->
                    </div>
                    <!--test_con结束-->
                </div>
                <van-button v-if="showBtn" @click="onSubmit" type="primary" size="large">提交答案</van-button>
            </div>
        </div>
    </div>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript">
    </script>
</body>

<script src="../../../js/vue/vue.js"></script>
<script src="../../../js/jsCookie/js.cookie.min.js"></script>
<script src="../../../js/axios/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />





<script>
    var app = new Vue({
        el: '#app',
        data: {
            user: {},
            dataList: [],
            daanList: [],
            pid: '',
            checked: false,
            showBtn: true,
        },
        methods: {
            getxx() {
                alert()
            },
            getCookieUser() {
                let userJson = Cookies.get('userInfo');
                if (!userJson) {
                    this.$notify({
                        type: 'danger',
                        message: '请先登录'
                    });
                    window.location.href = '../../../../login.html'
                    return
                }
                this.user = JSON.parse(userJson)
                if (!this.user) {
                    this.$notify({
                        type: 'danger',
                        message: '请先登录'
                    });
                    window.location.href = '../../../../login.html'
                    return
                }
                this.getDataTable()
            },
            formatDate(date) {
                var date = new Date(date);
                var YY = date.getFullYear() + '-';
                var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
                var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
                return YY + MM + DD + " " + hh + mm + ss;
            },
            exam(item) {
                // if (item.SCORE !== null || item.SCORE !== '') {
                //     this.$notify({
                //         type: 'danger',
                //         message: '您已经参与过这场考试！'
                //     });

                //     return
                // }
                window.location.href = 'exam.html?id=' + item.ID
                Cookies.set("checkItem", item, {
                    expires: 7,
                });

            },
            setDaan(item, anItem) {
                let that = this
                let f = true
                let daanList2 = that.daanList
                that.daanList = []
                let _daan = ""
                let _daanId = ''
                daanList2.forEach(daanItem => {
                    if (item.TOPICID === daanItem.TOPICID) {

                        if (item.TYPENUM === '1') {
                            daanItem.daan = anItem.ANSWERMSG
                            daanItem.daanId = anItem.ANSWERID
                        } else {
                            if (daanItem.daan.indexOf(anItem.ANSWERMSG) >= 0) {
                                daanItem.daan = daanItem.daan.replace(anItem.ANSWERMSG, "")

                            } else {
                                if (daanItem.daan.length > 0) {
                                    daanItem.daan += '，'
                                    daanItem.daanId += '，'
                                }
                                daanItem.daan += anItem.ANSWERMSG
                                daanItem.daanId += anItem.ANSWERID
                            }
                        }
                        f = false
                        item.daan = daanItem.daan
                    }
                })

                if (f) {
                    daanList2.push({
                        daan: anItem.ANSWERMSG,
                        TOPICID: item.TOPICID,
                        daanId: anItem.ANSWERID
                    })
                    item.daan = anItem.ANSWERMSG
                }
                that.daanList = daanList2
            },
            GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);

                if (r != null)
                    return (r[2]);
                return null;
            },
            getDataTable() {
                let formData = new FormData();
                formData.append("paperId", this.pid);
                axios
                    .post(
                        "http://10.11.41.128:30010/exam/findExamByPaperId?ticket=" + Cookies.get('ticket'),
                        formData, {
                            headers: {
                                "Content-Type": "multipart/form-data",
                                "token": this.user.token,
                            },
                        }
                    )
                    .then(res => {
                        if (res.data === null || res.data === " ") return;
                        if (res.data.status === 1) {
                            console.log(res.data)
                            this.dataList = res.data.data
                            this.dataList.forEach(item => {
                                item.daan = ''
                            })
                            setTimeout(() => {
                                init()
                            }, 500);
                        } else {
                            this.showBtn = false
                            this.$notify({
                                type: 'danger',
                                message: '加载失败' + res.data.msg
                            });
                            if (res.data.msg === "未登录") {
                                window.location.href = "../../../../login.html"
                            }
                            setTimeout(() => {
                                window.location.href = 'catemain-errtm.html'
                            }, 2000);
                        }
                    });
            },

            onSubmit() {
                if (this.dataList.length != this.daanList.length) {
                    this.$dialog.alert({
                        message: '您的题目没有打完！请继续答题！',
                        theme: 'round-button',
                    }).then(() => {});
                    return
                }


                let formData = new FormData();
                // formData.append("randow", Math.random());
                formData.append("paperId", this.pid);
                formData.append("answer", this.daanList.map(function(obj, index) {
                    return obj.TOPICID + '|||' + obj.daanId;
                }).join("@@@"));

                this.showBtn = false
                axios
                    .post(
                        "http://10.11.41.128:30010/exam/addExamRecord?ticket=" + Cookies.get('ticket'), formData, {
                            headers: {
                                "Content-Type": "multipart/form-data",
                                "token": this.user.token,
                            },
                        }
                    )
                    .then((res) => {
                        if (res.data === null || res.data === "") return;
                        if (res.data.msg === '请求成功') {
                            this.$notify({
                                type: 'success',
                                message: '提交成功！'
                            });

                            setTimeout(() => {
                                window.location.href = 'catemain-errtm.html'
                            }, 1500);
                        } else {
                            this.showBtn = true
                            this.$notify({
                                type: 'danger',
                                message: '加载失败' + res.data.msg
                            });
                            if (res.data.msg === "未登录") {
                                window.location.href = "../../../../login.html"
                            }
                        }
                    });
            },


        },
        mounted: function() {
            let id = this.GetQueryString('pid')
            if (id === null) {
                this.$notify({
                    type: 'danger',
                    message: '未加载到试卷信息！'
                });
                // setTimeout(() => {
                //     window.location.href = 'catemain-errtm.html'
                // }, 1500);
            } else {
                this.pid = id
                this.getCookieUser()
            }

        }
    })
</script>

</html>